<template>
  <div>
    <div class="header">
      <van-icon size="18px" name="arrow-left" @click="goback" />
      <div class="title">委托经纪人 <span>0佣金</span></div>
      <div />
    </div>
    <div class="space" />
    <div class="info">不动产证照片<span>(或其他权属证明)</span></div>
    <div class="picup">
      <van-uploader
        v-model="fileList"
        accept="image/*"
        :max-count="1"
        :after-read="afterRead"
      />
    </div>
    <div class="info">身份证照片<span>(仅用于确认权属信息)</span></div>
    <div v-show="pass" class="picup">
      <div ref="idcard" class="idcardup">
        <van-uploader
          v-model="fileList2"
          accept="image/*"
          :max-count="1"
          :after-read="afterRead2"
        />
      </div>
    </div>
    <div v-show="!pass" class="passreal">身份证照片已上传</div>
    <van-cell
      title="城市"
      size="large"
      is-link
      @click="flag ? (show1 = true) : (show1 = false)"
      >{{ value1 }}</van-cell
    >
    <van-cell title="方便联系时间" size="large" is-link @click="showdate"
      >{{ date }} {{ valuetime }}</van-cell
    >
    <van-cell class="pcell" title="联系人信息" size="large">
      <div>{{ sendval.contactsName }}</div>
    </van-cell>
    <van-cell
      class="pcell"
      title="请输入电话"
      label="将会以隐私号码形式展示"
      size="large"
    >
      <div>{{ sendval.contactsNum }}</div>
    </van-cell>
    <div style="min-height: 180px">
      <div v-show="showyan1" class="ening">
        委托验核中...
        <div>委托验核成功后会有经纪人与您联系</div>
      </div>
      <div v-show="showen" class="ening">委托匹配中...</div>
      <div v-show="showre" class="enok">
        <div class="box1">委托成功</div>
        <div class="box2">
          <img src="../../assets/logo.png" alt="" />
          <div>
            <div><span class="tipbox">平台服务编号</span>8948914894891</div>
            <div><span class="tipbox">入驻平台时间</span>2021-09-01</div>
            <div><span class="tipbox">服务业主数量</span>2000人</div>
            <div>
              <span class="tipbox">服务质量星级</span>
              <van-rate
                v-model="value"
                :size="16"
                color="#ffd21e"
                void-icon="star"
                void-color="#eee"
              />
            </div>
            <div>
              <span class="tipbox">经纪人标签</span
              ><span class="sort">服务好</span><span class="sort">态度好</span>
            </div>
          </div>
        </div>
        <div class="box3">
          <div><van-icon name="phone-circle-o" /><span>拨打电话</span></div>
          <div><van-icon name="comment-o" /><span>在线沟通</span></div>
        </div>
      </div>
    </div>
    <div class="info">房源发布流程</div>
    <div class="line">
      <div class="one">
        <img src="../../assets/buyentrust01.png" />
        <div class="">智能匹配</div>
      </div>
      <div class="two">
        <img src="../../assets//buysell09.png" />
      </div>
      <div class="one">
        <img src="../../assets/buyentrust02.png" />
        <div class="">上门服务</div>
      </div>
      <div class="two">
        <img src="../../assets//buysell09.png" />
      </div>
      <div class="one">
        <img src="../../assets/buyentrust03.png" />
        <div class="">极速上架</div>
      </div>
    </div>
    <div class="btnpart">
      <div v-show="showyan2" class="cheak">
        <van-checkbox
          v-model="checked"
          shape="square"
          icon-size="12px"
          checked-color="#45b7cb"
        />
        <span
          >我已阅读并同意<span class="xy" @click="toownerupagreement"
            >《业主挂牌房源协议》</span
          ></span
        >
      </div>
      <button v-show="showyan2" @click="sendentrust">验核委托</button>
      <button v-show="showyan1">验核中</button>
      <button v-show="showen">委托中</button>
      <button v-show="showre" @click="tome">委托成功</button>
      <div class="safe" />
    </div>

    <van-popup
      v-model="show1"
      :style="{ height: '40%' }"
      position="bottom"
      @close="onclose1"
    >
      <van-tree-select
        :items="items"
        :active-id.sync="activeId"
        :main-active-index.sync="activeIndex"
        @click-nav="getAdcode"
        @click-item="getCity"
      />
    </van-popup>
    <van-popup v-model="show" @close="onclose">
      <div class="showpart">
        <div>恭喜委托成功</div>
        <div>经纪人将在30分钟内与您电话联系</div>
        <div>请注意接听</div>
        <div>
          <div class="sline" />
          <div class="">感谢您的信赖托付</div>
          <div class="sline" />
        </div>
      </div>
    </van-popup>
    <van-calendar v-model="showcal" color="#45b7cb" @confirm="onConfirm" />
    <van-popup
      v-model="showtime1"
      position="bottom"
      :style="{ height: '40%' }"
      @close="onclosetime1"
    >
      <van-datetime-picker
        v-model="TimeMin"
        type="time"
        title="选择起始时间"
        :min-hour="7"
        :max-hour="19"
        visible-item-count="4"
        @cancel="onclosetime1"
        @confirm="choosetime1"
      />
    </van-popup>
    <van-popup
      v-model="showtime2"
      position="bottom"
      :style="{ height: '40%' }"
      @close="onclosetime2"
    >
      <van-datetime-picker
        v-model="TimeMax"
        type="time"
        title="选择结束时间"
        :min-hour="showTimeMin"
        :max-hour="20"
        visible-item-count="4"
        @cancel="onclosetime2"
        @confirm="choosetime2"
      />
    </van-popup>
  </div>
</template>

<script>
import { getToken } from "../../apis/house";
import { getUserInfo } from "../../apis/user.js";
import { dataURLtoFile, uuid } from "../../utils/help.js";
import { idcardUp, ownerEntrust, certificationNew } from "../../apis/user.js";
const qiniu = require("qiniu-js");
import local from "../../utils/local.js";
import { _local } from "@/utils/storage";
import { getAreaList } from "@/apis/city";
import { Toast } from "vant";
import { checkTrust } from "@/apis/user";

export default {
  data() {
    return {
      items: [
        {
          text: "区域",
          children: [],
          disabled: true,
        },
      ],
      activeId: "",
      activeIndex: "",
      show1: false,
      value1: "请选择",
      fileList: [],
      fileList2: [],
      checked: false,
      value: 4.5,
      show: false,
      showyan1: false,
      showyan2: true,
      showen: false,
      showre: false,
      showcal: false,
      date: "",
      showtime1: false,
      showtime2: false,
      showTimeMin: 0,
      TimeMin: 0,
      TimeMax: 0,
      valuetime: "请选择",
      dayTime: 0,
      sendval: {
        houseProperty: "",
        contactsName: "",
        contactsNum: "",
        contactsMinTime: "",
        contactsMaxTime: "",
      },
      pass: true,
      flag: false,
      cansetInfo: true,
      idcardUrl: "",
    };
  },
  // beforeUpdate() {
  //   if (this.showen) {
  //     setTimeout(() => {
  //       this.showen = false;
  //       this.show = true;
  //       this.showre = true;
  //     }, 1000);
  //   }
  // },
  // beforeDestroy() {
  //   if (this.cansetInfo) {
  //     const obj = {
  //       sendval: {},
  //       fileList: [],
  //       idcardUrl: "",
  //       valuetime: "",
  //       date: "",
  //     };
  //     obj.sendval = this.sendval;
  //     obj.idcardUrl = this.idcardUrl;
  //     obj.fileList = this.fileList;
  //     obj.valuetime = this.valuetime;
  //     obj.date = this.date;
  //     local.set("setEntrust", JSON.stringify(obj));
  //   } else {
  //     local.del("setEntrust");
  //   }
  // },
  created() {
    this.getInfo();
    this.getqntoken();
    this.getCityList();
    this.checkRepeat();
    // if (JSON.parse(local.get("setEntrust"))) {
    //   const Info = JSON.parse(local.get("setEntrust"));
    //   this.sendval = Info.sendval;
    //   this.idcardUrl = Info.idcardUrl;
    //   if (this.idcardUrl) {
    //     const obj = { url: "", isImage: true };
    //     obj.url = this.$imgUrl + this.idcardUrl;
    //     this.fileList2.push(obj);
    //     idcardUp({ idCardImage: this.idcardUrl }).then((rep) => {
    //       if (rep.code == 2030 || rep.code == 2045) {
    //         this.$toast(rep.msg);
    //       } else if (rep.code == 200) {
    //         this.flag = true;
    //       }
    //     });
    //   }
    //   if (Info.valuetime) {
    //     this.valuetime = Info.valuetime;
    //   }
    //   if (Info.date) {
    //     this.date = Info.date;
    //   }
    //   if (Info.sendval.houseProperty) {
    //     const obj = { url: "", isImage: true };
    //     obj.url = this.$imgUrl + Info.sendval.houseProperty;
    //     this.fileList.push(obj);
    //   }
    // }
  },
  methods: {
    checkRepeat() {
      checkTrust().then((res) => {
        console.log("检查是否有委托单", res);
        if (res.code == 500) {
          this.$dialog
            .confirm({
              title: "温馨提示",
              className: "leftpart",
              confirmButtonText: "继续委托",
              confirmButtonColor: "#45b7cb",
              cancelButtonText: "取消委托",
              message: res.msg + "(可在个人中心-我的房源查看委托单进度)",
              messageAlign: "left",
            })
            .then(() => {})
            .catch(() => {
              this.$router.push("/home/me");
            });
        }
      });
    },
    getCityList() {
      getAreaList().then((res) => {
        // console.log(res);
        res.result.list.forEach((e, i) => {
          // console.log(e)
          var obj = {};
          obj.text = e.name;
          obj.adcode = e.adcode;
          obj.children = [];
          this.items.push(obj);
        });
      });
    },
    getCity(data) {
      this.sendval.adCode = data.adcode;
      this.sendval.cityCode = data.citycode;
      this.sendval.city = data.text;
      this.value1 = data.text;
      this.show1 = false;
      if (this.value2 == "请选择") {
        this.show2 = true;
      }
      // console.log(data)
    },
    getAdcode(index) {
      this.items[index].children = [];
      getAreaList({
        adcode: this.items[index].adcode,
      }).then((res) => {
        console.log(res);
        res.result.list.forEach((e, i) => {
          var obj = {};
          obj.text = e.name;
          obj.citycode = e.citycode;
          obj.adcode = e.adcode;
          obj.id = i;
          this.items[index].children.push(obj);
        });
      });
    },
    onclose1() {
      this.show1 = false;
    },
    goback() {
      this.$router.go(-1);
    },
    async getqntoken() {
      await getToken().then((res) => {
        local.set("qntoken", res.result.token);
        this.token = local.get("qntoken");
      });
    },
    getInfo() {
      if (_local.get("user").result.realNameAuthStatus == 1) {
        this.pass = false;
        this.flag = true;
        this.sendval.contactsName = _local.get("user").result.realname;
        this.sendval.contactsNum = _local.get("user").result.mobile;
      }
    },
    toownerupagreement() {
      this.$router.push({ path: "/ownerupagreement" });
    },
    tome() {
      this.$router.push({ path: "/home/me" });
    },
    onclose() {
      this.show = false;
    },
    onclosetime1() {
      this.showtime1 = false;
    },
    choosetime1() {
      this.showtime1 = false;
      this.showtime2 = true;
      this.showTimeMin = this.TimeMin.substr(0, 2);
    },
    onclosetime2() {
      this.valuetime = `${this.TimeMin}-${this.TimeMax}`;
      this.showtime2 = false;
    },
    choosetime2() {
      this.showtime2 = false;
    },
    formatDate(date) {
      this.dayTime = date.getTime();
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    onConfirm(date) {
      this.showcal = false;
      this.date = this.formatDate(date);
      this.showtime1 = true;
    },
    showdate() {
      if (this.flag) {
        this.showcal = true;
      }
    },
    afterRead(file) {
      const _this = this;
      const fileurl = file.content;
      const name = file.file.name;
      const imgfile = dataURLtoFile(fileurl, name);
      const config = {
        useCdnDomain: true,
        region: qiniu.region.z2,
        forceDirect: true,
      };
      const putExtra = {
        fname: name,
        mimeType: "image/jpeg;image/png",
      };
      const observer = {
        complete(res) {
          _this.sendval.houseProperty = res.key;
        },
      };
      const observable = qiniu.upload(
        imgfile,
        "image/" + uuid(),
        this.token,
        putExtra,
        config
      );
      observable.subscribe(observer);
    },
    afterRead2(file) {
      const _this = this;
      const fileurl = file.content;
      const name = file.file.name;
      const imgfile = dataURLtoFile(fileurl, name);
      const config = {
        useCdnDomain: true,
        region: qiniu.region.z2,
        forceDirect: true,
      };
      const putExtra = {
        fname: name,
        mimeType: "image/jpeg;image/png",
      };
      const observer = {
        complete(res) {
          _this.idcardUrl = res.key;
          certificationNew({ idCardImage: res.key }).then((rep) => {
            if (rep.code == 2030 || rep.code == 2045) {
              _this.$toast(rep.msg);
            } else if (rep.code == 200 || rep.code == 201) {
              _this.flag = true;
              console.log(rep);
              _this.sendval.contactsName = rep.result.name;
              _this.sendval.contactsNum = rep.result.mobile;
            }
          });
        },
      };
      const observable = qiniu.upload(
        imgfile,
        "idcard/" + uuid(),
        this.token,
        putExtra,
        config
      );
      observable.subscribe(observer);
    },
    sendentrust() {
      if (this.checked) {
        if (!this.sendval.houseProperty) {
          this.$toast("请上传不动产证照片");
        } else if (!this.flag) {
          this.$toast("身份证未通过");
        } else if (!this.sendval.city) {
          this.$toast("请选择城市");
        } else if (!this.TimeMin || !this.TimeMax) {
          this.$toast("请选择时间");
        } else if (!this.date) {
          this.$toast("请选择日期");
        } else if (!this.sendval.contactsName) {
          this.$toast("请输入联系人信息");
        } else if (!this.sendval.contactsNum) {
          this.$toast("请输入电话");
        } else {
          const a = Number(this.TimeMin.substr(0, 2));
          const b = Number(this.TimeMax.substr(0, 2));
          this.sendval.contactsMinTime = (this.dayTime + a * 3600000) / 1000;
          this.sendval.contactsMaxTime = (this.dayTime + b * 3600000) / 1000;
          this.$toast.loading({
            duration: 0,
            message: "加载中...",
            forbidClick: true,
          });
          ownerEntrust(this.sendval).then((res) => {
            console.log(this.sendval);
            console.log(res);
            if (res.code == 200 || res.code == 201) {
              this.$toast.clear();
              this.showyan1 = true;
              this.showyan2 = false;
              this.sendval = {
                houseProperty: "",
                contactsName: "",
                contactsNum: "",
                contactsMinTime: "",
                contactsMaxTime: "",
              };
              this.fileList = [];
              this.fileList2 = [];
              this.cansetInfo = false;
              this.$dialog
                .alert({
                  title: "温馨提示",
                  message: "权属核验中，请在个人中心-我的房源查看进程",
                  confirmButtonColor: "#45b7cb",
                  theme: "round-button",
                  messageAlign: "left",
                })
                .then(() => {
                  this.$router.push("/home/me");
                });
            } else {
              this.$toast(res.msg);
            }
          });
        }
      } else {
        this.$toast("请阅读并勾选下方协议");
      }
      // this.showyan1 = true
      // this.showyan2 = false
      // setTimeout(() => {
      //   this.showyan1 = false
      //   this.showen = true
      // }, 2000)
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  position: fixed;
  left: 0;
  top: 0;
  padding: 10px 15px;
  z-index: 1000;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  font-size: 15px;
  color: #333;
  background-color: #fff;
  .title {
    line-height: 25px;
    height: 25px;
    font-size: 18px;
    font-weight: bold;
    margin-left: 10px;
    span {
      font-size: 12px;
      font-weight: normal;
    }
  }
}
.space {
  height: 50px;
}
.info {
  margin: 10px 15px;
  font-size: 17px;
  font-weight: bold;

  span {
    font-size: 16px;
    color: #ccc;
    font-weight: normal;
  }
}
/deep/.pcell {
  input {
    width: 100px;
    text-align: right;
    border: none;
    color: #969799;
    &::placeholder {
      color: #969799;
    }
  }
  .van-cell__value {
    box-sizing: border-box;
    padding-right: 17px;
  }
  .van-cell__label {
    font-size: 13px;
  }
}
.picup {
  margin: 0 15px;
}
.passreal {
  font-size: 13px;
  color: #45b7cb;
  margin: 10px 15px;
}
.ening {
  padding: 50px 0;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  color: #45b7cb;
  > div {
    margin-top: 10px;
    font-size: 18px;
    color: #333;
  }
}
.enok {
  .box1 {
    text-align: center;
    font-size: 20px;
    color: #45b7cb;
    font-weight: bold;
    margin: 10px 0;
  }
  .box2 {
    display: flex;
    margin: 0 15px;
    > img {
      width: 115px;
      height: 130px;
      margin-right: 10px;
    }
    > div {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      font-size: 12px;
      color: #333;
      .tipbox {
        display: inline-block;
        width: 90px;
      }
      .sort {
        display: inline-block;
        background-color: #ebfafd;
        color: #45b7cb;
        margin-right: 5px;
        padding: 1px 5px;
      }
    }
  }
  .box3 {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 10px;
    > div {
      display: flex;
      align-items: center;
      color: #45b7cb;
      > span {
        margin-left: 3px;
      }
    }
  }
}
.line {
  margin: 0 45px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: #333;
  padding-bottom: 120px;
  .one {
    text-align: center;

    img {
      width: 50px;
      height: 50px;
    }
  }
  .two {
    padding-bottom: 20px;
    img {
      width: 30px;
      height: 7px;
    }
  }
}
.btnpart {
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  z-index: 100;
  padding: 10px 0;
  border-top: 1px solid #f1f1f1;
  background-color: #fff;
  text-align: center;
  .cheak {
    padding-bottom: 5px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 15px;
    font-size: 11px;
    color: #333;
    > span {
      margin-left: 3px;
    }
    .xy {
      color: #45b7cb;
    }
  }
  button:active {
    background-image: linear-gradient(to bottom right, #6fcddd79, #49b9cd77);
  }
  button {
    border: none;
    border-radius: 20px;
    height: 40px;
    width: 90%;
    color: #fff;
    background-image: linear-gradient(to bottom right, #6fccdd, #49b9cd);
  }
  .safe {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
}
.showpart {
  width: 300px;
  background-color: #fff;
  text-align: center;
  padding: 10px 0;

  > div {
    &:first-child {
      color: #45b7cb;
      font-size: 16px;
      margin: 20px 0;
      font-weight: bold;
    }

    &:nth-child(2),
    &:nth-child(3) {
      font-size: 14px;
    }

    &:nth-child(3) {
      margin-bottom: 30px;
    }

    &:last-child {
      padding: 0 0 20px;
      font-size: 13px;
      color: #999;
      display: flex;
      justify-content: center;

      .sline {
        height: 10px;
        width: 35px;
        border-bottom: 1px solid #999;
        margin: 0 5px;
      }
    }
  }
}
</style>
